<html>
	<head>		
		<link href="/css/main.css" rel="stylesheet">	
		<script src="/js/jquery-2.0.3.min.js"></script>	
		<script src="/js/dog.js"></script>	
		<script type='text/javascript'>
			var ds = new DataObjectGeneratorDataSet();
			var table = ds.table('user');
			
			function fnDeleteRow(key,e){
				var params = {keyfield0:'id', key0:key};
				table.remove(params,function(response){
					$("#response").html(response);
					fnDrawUsers();
				});
			}			
			function bindEdit(){				
				$("td[editable=true]").click(function(){					
					if($('.edit_input',this).length==0){
						
						var editInput = $("<input type='text' class='edit_input'/>");
						var td=$(this);
						var old_value=td.html();
						$(editInput).val(old_value);
						$(editInput).focusout(function(){														
							var key = td.parent().children('td:first').html();
							var new_value = $(this).val();							
							var datafield = td.attr('datafield');
							//alert(key+" "+new_value+" "+datafield);
							var params = {datafield0:datafield,value0:new_value, keyfield0:'id', key0:key};
							
							table.update(params,function(response){
								td.html(new_value);
								$("#response").html(response);
								fnDrawUsers();
							});
						});
						td.html($(editInput));
						$(editInput).focus();
						//alert($('.edit_input',this).length);
					}
				});
			}
			function fnDrawUsers(){					
				table.renew(function(){			
					var tab = $("<table><thead><tr></tr></thead><tbody></tbody></table>");
					table.eachCol(function(e){		
						$("thead tr:first", tab).append("<th>"+e+"</th>");					
					});
					
					table.eachRow(function(r){					
						$("tbody", tab).append("<tr></tr>");					
						
						$("tbody tr:last", tab).append("<td datafield='Id'>"+r[0]+"</td>");					
						$("tbody tr:last", tab).append("<td editable='true' datafield='Nick'>"+r[1]+"</td>");					
						$("tbody tr:last", tab).append("<td editable='true' datafield='Password'>"+r[2]+"</td>");
						$("tbody tr:last", tab).append("<td onclick='fnDeleteRow("+r[0]+",this)' class='action'>delete</td>");														
					});	
					$('#users').html(tab);
					bindEdit();
				});			
			}
			function fnInsertUser(caller){	
				caller.val('in progress...');			
				var id0 = $('input[name=Id0]').val();
				var nick0 = $('input[name=Nick0]').val();
				var password0 = $('input[name=Password0]').val();								
				var id1 = $('input[name=Id1]').val();
				var nick1 = $('input[name=Nick1]').val();
				var password1 = $('input[name=Password1]').val();				
				
				var params = {Id0:id0,Nick0:nick0,Password0:password0};

				table.insert(params,function(response){
					caller.val('insert');					
					fnDrawUsers();					
					$("#response").html(response);
				});
			}
			$(document).ready(function(){			
				$('h3').each(function(){$(this).append('<expander>-</expander>')});
				$('h3').click(function(){
					var expander = $('expander',$(this)).html();
					$(this).next('.section').fadeToggle();
					$('expander',$(this)).html((expander=='+')? '-' : '+');
				});
				fnDrawUsers();
			});			
			
		</script>
	</head>
	<body>
		<h3>dbo.User</h3>
		<div class='section'>			
				<input placeholder='id' name="Id0" value="null">
				<input placeholder='Nick' name="Nick0" value="taras">
				<input placeholder='Password' name="Password0" value="pass0">								
				<input type="button" onclick='fnInsertUser($(this))' value="insert">			
			<br/><br/><br/>
			<span class='action' onclick='fnDrawUsers();'>renew users table</span><br/><br/>							
			<div id='users'>
			</div>
			<div id = 'response'>
			</div>
		</div>

	</body>
</html>